<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/order/status' }">支付管理</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/order/status' }">订单状态</el-breadcrumb-item>
        </el-breadcrumb>


        <div style="height: 400px; margin: 50px 100px; padding:50px; width: 20%; float: left; background-color: #fff;">
            <el-steps :active="1" direction="vertical" >
                <el-step title="下单" icon="el-icon-thumb"></el-step>
                <el-step title="取消订单" icon="el-icon-circle-close"></el-step>
                
            </el-steps>
        </div>

        <div style="height: 400px; margin: 50px 0px; width: 20%; padding:50px; float: left;background-color: #fff;">
            <el-steps :active="6" direction="vertical" >
                <el-step title="下单" icon="el-icon-thumb"></el-step>
                <el-step title="已支付" icon="el-icon-circle-check"></el-step>
                <el-step title="商家接单" icon="el-icon-document-checked"></el-step>
                <el-step title="制作中" icon="el-icon-magic-stick"></el-step>
                <el-step title="已完成" icon="el-icon-dish-1"></el-step>
                <el-step title="评价" icon="el-icon-chat-line-round"></el-step>
            </el-steps>
        </div>
        

        

        
    </div>
</template>

<script>
import axios from 'axios';

export default {
    name: "Statuss",
    data() {
        return {
          order_status_list : []  
           
        }
    },
    methods: {
        getList() {
            axios.get("/order/status")
            .then(
                res => {
                    this.order_status_list = res.data.data;
                   console.log(res.data.data); 
                }
            )
        }
    },
    created() {
        this.getList();
    }
}
</script>

<style scoped>
.el-form {
    margin: 0;
    padding: 0;
    text-align: left;
}
.el-pagination {
    margin-top: 20px;
}
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
</style>

